import LoadingComponent from './Loading.vue'
/*
LoadingComponent只是组件对象 不是组件，Vue.component('组件名', LoadingComponent只是组件对象)
需要 让他变成一个组件 我还要得到这个组件实例，如何让一个组件对象变成组件实例 且还需要得到这个实例
创建组件的另一种方式：需要在外部得到这个组件实例时使用
*/
const $loading = {
  // 暴露出一个install
  install: (Vue) => {
    // 通过Vue.extend(LoadingComponent) 得到一个创建组件的类
    const LoadingClass = Vue.extend(LoadingComponent)
    // new loadingClass 返回一个组件 实例
    const loadingComponent = new LoadingClass()
    // $mount() 组件渲染（将内部html加载成真实dom）
    const dom = loadingComponent.$mount().$el
    // 将组件的html挂载到body上
    document.body.appendChild(dom)
    // 添加到vue的原型方法上
    // 显示
    Vue.prototype.$showLoading = () => {
      loadingComponent.isShow = true
    }
    // 消失
    Vue.prototype.$hideLoading = () => {
      loadingComponent.isShow = false
    }
  }
}
// 导出$loading插件
export default $loading
